<template>
	<div class="main">
		<div class="left">
			<div @click="fn1" :class="{ active: isActive1 }">今天10月17日</div>
			<p @click="fn2" :class="{ active: isActive2 }">明天10月18日</p>
		</div>
		<div class="right">
			<p @click="pg1">07:00-07:30</p>
			<p @click="pg2">07:30-08:00</p>
			<p @click="pg3">08:00-08:30</p>
			<p>08:30-09:00</p>
			<p>09:00-09:30</p>
			<p>09:00-10:00</p>
			<p>10:00-10:30</p>
			<p>10:30-11:00</p>
			<p>11:00-11:30</p>
			<p>11:30-12:00</p>
			<p>12:00-12:30</p>
			<p>12:30-13:00</p>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			activeKey: 0,
			num: 1,
			isActive1: 1,
			isActive2: 0,
		}
	},

	components: {},

	computed: {},

	mounted() {
		this.$emit('get')
	},

	methods: {
		fn1() {
			this.isActive2 = 0
			this.isActive1 = 1
		},
		fn2() {
			this.isActive1 = 0
			this.isActive2 = 1
		},
		pg1() {
			console.log(1)
		},
		pg2() {
			console.log(1)
		},
		pg3() {
			console.log(1)
		},
	},
}
</script>

<style lang="less" scoped>
.van-sidebar-item {
	width: 100% !important;
}
.main {
	background-color: #dfdfdf;
	z-index: 999;
	width: 828px;
	height: 500px;

	display: flex;
}
.left {
	font-size: 30px;
	width: 200px;
	margin-top: 92px;
	margin-left: 42px;

	p {
		margin-top: 20px;
	}
	span {
	}
}
.right {
	width: 547px;
	margin-top: 92px;
	background-color: white;
}
.active {
	background-color: white;
}
</style>
